<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Resultats</title>
        <script src="http://www.google.com/jsapi?key=ABQIAAAAahcO7noe62FuOIQacCQQ7RTHkUDJMJAZieEeKAqNDtpKxMhoFxQsdtJdv3FJ1dT3WugUNJb7xD-jsQ" type="text/javascript"></script>
        <script type="text/javascript">
            google.load("maps", "3", {'other_params': 'sensor=true'});
            google.load("jquery", "1.5");
            google.load("jqueryui", "1.8.9");
        </script>

        <script type="text/javascript" src="Scripts/jquery.ui.map.js"></script>
        <script src="Scripts/shCore.js" type="text/javascript"></script>
        <script src="Scripts/shAutoloader.js" type="text/javascript"></script>
        <script src="Scripts/shBrushJScript.js" type="text/javascript"></script>
        <script src="Scripts/shBrushXml.js" type="text/javascript"></script>
        <script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer_packed.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                SyntaxHighlighter.all();
                $('#map_canvas').gmap({'center': new google.maps.LatLng(46.9000, 1.8500), 'zoom': 3, 'streetViewControl': false, 'callback': function() {
                        $.getJSON("/WSTP/Data.json", function(data) {
                            for (var i = 0; i < data.length; i++) {
                                console.log(data[i]);
                                var image = "<img src=\"" + data[i].image + "\"width='100px' height='100px'  />";
                                //if (data[i].image == "image") {
                                //    image = "<div style='width:50px'><br><br></div>";
                                //}
                                //$('#imgs').html('<img src="' + data[i].image + '" >');
                                $('#map_canvas').gmap('addMarker', {position: new google.maps.LatLng(data[i].latitude, data[i].longitude), title: data[i].label, tag: data[i].description, animation: google.maps.Animation.DROP}, function(map, marker) {
                                    $('#map_canvas').gmap('addInfoWindow', {'position': marker.getPosition(), 'content': data[i].label}, function(iw) {
                                        $(marker).click(function() {
                                            iw.open(map, marker);
                                            map.panTo(marker.getPosition());
                                        });
                                    });
                                });
                            }
                            var markerCluster = new MarkerClusterer($('#map_canvas').gmap('getMap'), $('#map_canvas').gmap('getMarkers'));
                        });
                    }
                });
            });
        </script>
    </head>
    <body>
        <h1>Information sur le genre </h1>
        <div id="map_canvas" style="width:100%;height:600px"></div>
    </body>
</html>
